<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="text textactive">今日任务</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center">
        <el-col>
          <div>
            <el-col class="left2" v-for="(item,index) in taskdetails" :key="index">
              <el-row type="flex" justify="center">
                <el-col class="listbgc" :span="22">
                  <el-col :span="1" style="position: absolute;height: 100%;">
                    <div class="teamname" :style="{backgroundColor : colorlist[index]}">
                      <div class="team1">
                        <p>{{item.name}}</p>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="23" style="float: right;">
                    <el-row style="margin-top: 20px;">
                      <el-col style="width: 20%;" v-for="(item1,index1) in item.personalTaskReportVOList" :key="index1">
                        <el-row type="flex" justify="center">
                          <el-col :span="21">
                            <div
                              class="listbox">
                              <el-col class="tasknum">
                                <el-row>
                                  <el-col :offset="2">
                                    <p>客户 : {{item1.customerName}}</p>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :offset="2">
                                    <p style="width: 90%;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">岗位 : {{item1.name}} </p>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :span="16" :offset="2">
                                    <p>今日岗位简历数 : </p>
                                  </el-col>
                                  <el-col :span="4" :offset="2">
                                    <p>{{item1.count}}</p>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :span="16" :offset="2">
                                    <p>现做岗位简历数 : </p>
                                  </el-col>
                                  <el-col :span="4" :offset="2">
                                    <p>{{item1.nowCount}}</p>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :span="16" :offset="2">
                                    <p>还需岗位简历数 : </p>
                                  </el-col>
                                  <el-col :span="4" :offset="2">
                                    <p>{{item1.poor}}</p>
                                  </el-col>
                                </el-row>
                              </el-col>
                            </div>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  
  export default {
    data() {
      return {
        taskdetails: [],
        colorlist: ["#2cc6c9", "#9492d6", "#4bcfa5", "#79b7ee", "#fec35c", "#ff7c7c"],
      }
    },
    created() {
      //获取所有人的今日任务数据
      axios.post(this.url + '/todaytask/todaywork').then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.taskdetails = res.data.data.taskdetails;
        }
      });
    }
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .listbox {
    width: 185px;
    height: 110px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  
  @media screen and (min-width: 1200px) and (max-width: 1900px) {
    .listbox {
      width: 185px;
      height: 110px;
    }
  }
  
  .tasknum {
    color: #89898c;
    font-size: 14px;
    margin-top: 5px;
  }
  
  .teamname {
    height: 100%;
    width: 38px;
    background-color: #2cc6c9;
    box-shadow: 3px 0 3px -1px #ccc;
    letter-spacing: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  .listbgc {
    background-color: #f5f8fa;
    margin-top: 8px;
    position: relative;
    height: 100%;
  }
  
  .team1 {
    width: 50%;
    color: #fff;
  }
  
  
  .left2 {
    margin-bottom: 10px;
  }
  
  .textactive {
    color: #1099ff;
  }
  
  @media only screen and (min-width: 1920px) {
    .listbox {
      width: 263px;
      height: 110px;
    }
  }
</style>
